<template>
  <div style="display: flex; justify-content: center; align-items: center;">
    <el-form style="width: 30%;" ref="form" :model="form" label-width="80px">
      <el-form-item label="头像">
        <img class="img" :src="imgSrc"></img>

        <!-- 上传控件 -->
        <el-upload
          class="upload-demo"
          :action="updatePath"
          :on-success="uploadSucc"
          multiple>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age" placeholder="请输入当前年龄"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="个人介绍">
        <el-input type="textarea" v-model="form.info" placeholder="请编写个人介绍"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
   export default {
      data() {
        return {
          updatePath: "http://localhost/file/img/uploader",
          imgSrc: "../assets/header.jpeg",
          form: {
            name: "",
            age: "",
            sex: "",
            info: "",
            header: "",
            id: ""
          }
        }
      },
      methods: {
        onSubmit() {
          this.$.ajax({
            url: "/teacher/update",
            type: "POST",
            data: this.form,
            success: (data) => {
              this.$message.success("信息修改成功！");
              //刷新首页
            }
          });
        },
        uploadSucc(resp){
          console.log("上传成功！", resp);
          this.form.header = resp.data;

          //回显头像
          this.imgSrc = "http://localhost/file/img/download?imgName=" + resp.data;
        }
      },
      mounted(){
        //进入页面获取用户信息
        //页面加载时触发，获取登录令牌，解析登录的用户名称
        var jwtToken = this.$.getUserToken();
        if(!jwtToken){
          //说明当前没有登录，则跳转到登录页面
          this.$router.push("/");
        }

        //解析jwtToken令牌
        var userInfo = JSON.parse(this.$.parseJwtToken(jwtToken));
        console.log("--->用户信息", userInfo);
        this.form.name = userInfo.name;
        this.form.age = userInfo.age == -1 ? "" : userInfo.age;
        this.form.sex = userInfo.sex;
        this.form.info = userInfo.info;
        this.form.id = userInfo.id;
        this.imgSrc = "http://localhost/file/img/download?imgName=" + userInfo.header;
      }
    }
</script>

<style scoped="scoped">
  .img {
    width: 80px;
    height: 80px;
    border-radius: 50px;
  }
</style>
